import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button,Modal } from "antd";

import { WeaLocaleProvider, WeaDialog, WeaFormItem, WeaSearchGroup, WeaInputSearch,WeaTable } from 'ecCom';
import { WeaSwitch } from "comsMobx";
import { Condition } from '../list/listCondition';
import { Text } from '../util/text';
const text = new Text();
const getLabel = WeaLocaleProvider.getLabel;

@observer
class QuickSiftDialog extends React.Component {

    handleChange(data) {
        const { store: { searchJournal } } = this.props;
        let key = Object.keys(data)[0];
        if (key == "j_type") {
            //选中刊型时展示历史期数 
            searchJournal();
        }
    }
    onSearch=(value)=>{
        const { store: { searchJournal } } = this.props;
        searchJournal(value);
    }
    sureSift = (record) => {
        const { store: { saveQuickSift } } = this.props;
        Modal.confirm({
            content: '确定快捷筛选至此期刊?',
            onOk() {
                saveQuickSift({id:record.id,title:record.title,periods:record.periods});
            },
            onCancel() { },
        });
    }
    //获取表单condition
    getCondition = (form, condition, handleChange) => {
        let group = [];
        form.isFormInit && condition.map((c,index) => {
            let items = [];
            c.items.map((fields, index) => {
                items.push({
                    com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@z7mm4j@${fields.domkey[0]}`}
                        label={`${fields.label}`}
                        labelCol={{ span: `${fields.labelcol}` }}
                        error={form.getError(fields)}
                        tipPosition="bottom"
                        wrapperCol={{ span: `${fields.fieldcol}` }}>
                        <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@34qg8a@${fields.domkey[0]}`} fieldConfig={fields} form={form} onChange={handleChange}/>
                    </WeaFormItem>),
                    col: 1,
                })
            });
            items.push({
                com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@sn8nog@${index}`}
                    label={'查询期刊'}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                >
                    <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@hif11y@${index}`}
                        onSearch={this.onSearch}
                    />
                </WeaFormItem>),
                col: 1,
            }

            );
            group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ssr2mr@${index}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} />)
        });
        return <div>{group}</div>;
    }

    render() {
        const { store: { status, setState, quickSiftForm, quickSiftCondition, periodsTableStore, saveQuickSift,dataSource,columns } } = this.props;
        const { quickVisible } = status;
        // const dataSource = [{
        //     key: '1',
        //     name: '主题1',
        //     periods:'1'
        //   }, {
        //     key: '2',
        //     name: '主题2',
        //     periods:'2'
        //   }];
          
        //   const columns = [{
        //     title: '期刊标题',
        //     dataIndex: 'name',
        //     key: 'name',
        //     width: "60%",
        //     sorter: true
        //   }, {
        //     title: '期数',
        //     dataIndex: 'periods',
        //     key: 'periods',
        //     width: "40%",
        //   }];
        return (
            <div >
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@3worm9`}
                    className='info_quick_sift_dialog'
                    icon="icon-coms-government"
                    iconBgcolor='#f14a2d'
                    title={'快捷筛选'}
                    visible={quickVisible}
                    style={{ width: 500, height: 520 }}
                    onCancel={() => { setState({ quickVisible: false }) }}
                    buttons={[
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@m0q8y0@CLOSE`} type="ghost" onClick={() => { setState({ quickVisible: false }) }}>{text.CLOSE}</Button>)
                    ]}
                >
                    {this.getCondition(quickSiftForm, quickSiftCondition, this.handleChange.bind(this))}
                    {/* <WeaTable className="wea-info-table" comsWeaTableStore={periodsTableStore} needScroll={true} size="small"  scroll={{ y: '300px' }}*/}
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@3za8ke`} columns={columns} dataSource={dataSource} scroll={{ y: '300px' }}
                                onRowClick={(record) => { this.sureSift(record)}}
                    />
                </WeaDialog>
            </div>
        )
    }
}

export { QuickSiftDialog };